<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网站快速导航-子夜雨</title>
    <style type="text/css">

    </style>

</head>

<body>
    <!-- 头部部分 -->
    <div id="head" title="双击更改主标题">
        子夜雨
    </div>
    <!-- 时钟部分 -->
    <div class="time">
        <!-- 时 -->
        <ul class="t_ul">
            <li class="front"></li>
            <li class="top"></li>
            <li class="bot"></li>
            <li></li>
            <li></li>
            <li class="back"></li>
        </ul>
        <ul class="t_ul">
            <li class="front"></li>
            <li class="top"></li>
            <li class="bot"></li>
            <li></li>
            <li></li>
            <li class="back"></li>
        </ul>
        <!-- <ul><span class="point">∶</span></ul> -->
        <!-- 分 -->
        <ul class="t_ul">
            <li class="front"></li>
            <li class="top"></li>
            <li class="bot"></li>
            <li></li>
            <li></li>
            <li class="back"></li>
        </ul>
        <ul class="t_ul">
            <li class="front"></li>
            <li class="top"></li>
            <li class="bot"></li>
            <li></li>
            <li></li>
            <li class="back"></li>
        </ul>
        <!-- <ul><span class="point">∶</span></ul> -->
        <!-- 秒 -->
        <ul class="t_ul">
            <li class="front"></li>
            <li class="top"></li>
            <li class="bot"></li>
            <li></li>
            <li></li>
            <li class="back"></li>
        </ul>
        <ul class="t_ul">
            <li class="front"></li>
            <li class="top"></li>
            <li class="bot"></li>
            <li></li>
            <li></li>
            <li class="back"></li>
        </ul>
    </div>
    <!-- 搜索部分 -->
    <div class="search">
        <div class="search_box">
            <i style="width: 28px;height: 38px;margin: auto 10px;"></i>
            <input placeholder="" autofocus id="ipt_val">
            <span id="clear" title="清除">╳</span>
            <span id="search" title="默认百度搜索">搜索 <span id="moreSearch" title="更多搜索">⇲</span></span>
        </div>
        <div id="more" style="display: none;"></div>
    </div>
    <!-- 导航部分 -->
    <div class="nav">
        <div class="study">
            <!-- 学习轨迹 -->
        </div>
        <div class="resource">
            <!-- 资源填充 -->
        </div>
        <div class="interest">
            <!-- 兴趣收集 -->
        </div>
    </div>
    <!-- 底部部分 -->
    <div class="grad">
        <div class="g_left"></div>
        <span><a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=TH9_dHt9fHR7dXkMPT1iLyMh" target="_bank" class="sendemail" title="点我发邮件">• 子夜雨 •</a></span>
        <div class="g_right"></div>
    </div>
    <!-- 定位：模式切换 -->
    <div class="mode">
        <div id="day" title="切换夜间">白天</div>
        <div id="night" title="切换白天">夜间</div>
    </div>
    <!-- 定位：提示框 -->
    <div id="tip" style="display: none;"><span id="tiptxt"></span></div>
    <!-- 定位：动态输入框 -->
    <div class="position_input" style="display: none;">
        <div class="AED">
            <div class="set_tag">
                <span id="set_title">弹出错误</span>
                <div id="set_content"></div>
                <div class="btn">
                    <span id="sure">确定</span>
                </div>
            </div>
        </div>
    </div>

</body>
<style>
    .body {
        background: #0f3854;
        background: -webkit-radial-gradient(#0a2e38 0%, #000000 80%);
        background: -o-radial-gradient(#0a2e38 0%, #000000 80%);
        background: -moz-radial-gradient(#0a2e38 0%, #000000 80%);
        background: radial-gradient(#0a2e38 0%, #000000 80%);
        background-size: 100%;
    }
    
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    ul {
        list-style: none;
    }
    
    #head {
        width: 1200px;
        margin: auto;
        color: #4EA0D3;
        font: bold 50px 'KaiTi';
        text-align: center;
        margin-top: 135px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
    }
    /* ========================时钟部分======================== */
    
    .t_ul {
        float: left;
        margin: 10px 13px;
        width: 35px;
        height: 35px;
        position: relative;
        transform-style: preserve-3d;
        transform: rotateX(5deg) rotateY(-7deg);
    }
    
    .transition {
        transition: all 0.5s;
        transform: rotateY(-7deg) rotateX(95deg);
    }
    
    .time {
        width: 370px;
        height: 60px;
        margin: 40px auto 40px auto;
        /*animation: sk 30s alternate infinite*/
    }
    
    .time .t_ul li {
        text-align: center;
        line-height: 30px;
        font-size: 30px;
        color: rgba(255, 255, 255, 0.2);
        width: 100%;
        height: 100%;
        position: absolute;
        transform: translateZ(17px);
        border: 1px solid #007ACC;
        font-weight: 400;
        text-shadow: 0 0 5px #29a1f1, 0 0 6px #29a1f1, 0 0 7px #29a1f1, 0 0 8px #29a1f1, 0 0 9px #29a1f1;
        padding-left: 5px;
        box-sizing: border-box;
    }
    
    .time li:nth-of-type(1) {
        font-size: 30px;
        text-shadow: 0 0 5px #fff, 0 0 20px #fefcc9;
        line-height: 35px;
        color: #007ACC;
        transform: translateZ(17px);
    }
    
    .time li:nth-of-type(2) {
        transform: rotateX(90deg) translateZ(17px)
    }
    
    .time li:nth-of-type(3) {
        transform: rotateX(90deg) translateZ(-17px)
    }
    
    .time li:nth-of-type(4) {
        transform: rotateY(90deg) translateZ(17px)
    }
    
    .time li:nth-of-type(5) {
        transform: rotateY(90deg) translateZ(-17px)
    }
    
    .time li:nth-of-type(6) {
        transform: translateZ(-17px);
    }
    
    .point {
        color: #fff;
        font-size: 20px;
        font-weight: bold;
    }
    /*@keyframes sk {
    0 {
        transform: rotateX(-10deg) rotateY(-15deg) rotateZ(-5deg)
    }
    100% {
        transform: rotateX(10deg) rotateY(15deg) rotateZ(5deg)
    }
}*/
    /* ========================搜索部分======================== */
    
    .search {
        position: relative;
        width: 606px;
        margin: auto;
        font-size: 20px;
    }
    
    .search_box {
        position: relative;
        display: flex;
        width: 442px;
        height: 38px;
        margin: auto;
        border: 1px solid #007ACC;
        border-radius: 38px;
    }
    
    .search_box input {
        flex: 3;
        color: #4689bf;
        height: 100%;
        font-size: 20px;
        border: none;
        outline: none;
        background: none;
    }
    
    #clear {
        display: none;
        position: absolute;
        color: #ababab;
        top: 6px;
        right: 104px;
        cursor: pointer;
    }
    
    #clear:hover {
        color: orangered;
    }
    
    #search {
        flex: 1;
        width: 90px;
        height: 100%;
        color: white;
        line-height: 38px;
        text-align: center;
        background: #4689BF;
        border-radius: 0 38px 38px 0;
        cursor: pointer;
    }
    
    #search:hover {
        background: #5693bd;
    }
    
    #moreSearch {
        display: inline-block;
        height: 100%;
        padding: 0 5px;
        cursor: pointer;
    }
    
    #more {
        position: absolute;
        width: 410px;
        left: 98px;
        font-size: 16px;
        background: #fff;
        z-index: 1;
    }
    
    .more {
        background: #061E24!important;
    }
    /* ========================导航部分======================== */
    
    .nav {
        width: 1200px;
        height: 100%;
        text-align: center;
        margin: 50px auto;
        display: flex;
        justify-content: space-around;
    }
    
    .study,
    .resource,
    .interest {
        width: 380px;
        height: 100%;
        min-height: 36px;
    }
    
    .title {
        color: white;
        font-size: 20px;
        padding: 5px 0;
        padding-right: 2px;
        background: #4d90c4;
        cursor: pointer;
        box-shadow: 1px 1px 3px #4d90c4;
    }
    .tag{
        overflow: hidden;
    }
    .tag:hover>.list {
        opacity: 1;
        /* visibility: visible; */
        /* display: block; */
        height: auto;
        border: 1px solid #4d90c4;
        border-top: none;
        border-bottom: 2px solid #4d90c4;
        padding-bottom: 10px;
    }
    
    .tag:hover i {
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        /* IE 9 */
        -moz-transform: rotate(90deg);
        /* Firefox */
        -webkit-transform: rotate(90deg);
        /* Safari 和 Chrome */
        -o-transform: rotate(90deg);
        /* Opera */
    }
    
    .title>i {
        float: right;
        transition: all 0.25s;
    }
    
    .list {
        height: auto;
        border: 1px solid #4d90c4;
        border-top: none;
        border-bottom: 2px solid #4d90c4;
        padding-bottom: 10px;
        box-shadow: 1px 1px 3px #4d90c4;
        transition: all 2s;
        opacity: 0;
        /* visibility: hidden; */
        /* display: none; */
    }
    
    .list>ul {
        display: flex;
        flex-wrap: wrap;
    }
    
    .list>ul>li {
        height: 22px;
        line-height: 22px;
        flex: 0 0 110px;
        margin: 10px 8px 0 8px;
        transition: all 0.25s;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .list>ul>li>a {
        text-decoration: none;
        display: block;
        color: rgb(77, 144, 196);
        width: 100%;
        height: 100%;
        text-align: center;
    }
    
    .list>ul>li>a:hover {
        color: #fff!important;
        font-size: bold;
        background: #007ACC;
        cursor: pointer;
    }
    
    .list>ul>span {
        flex: 0 0 100%;
        width: 100%;
        padding: 8px;
        box-sizing: border-box;
        color: #007ACC;
        text-align: left;
        /* background: #5FA2D6; */
        border-bottom: 1px dashed #007ACC;
    }
    
    .list>ul>span:hover>span {
        /* display: block; */
        /* visibility:visible; */
        opacity: 1;
    }
    
    .add,
    .edit,
    .dele {
        font-size: 16px;
        font-weight: 900;
        cursor: pointer;
        float: right;
        width: 14px;
        height: 14px;
        margin: auto 3px;
        margin-top: 5px;
        opacity: 0;
        /* visibility: hidden; */
        transition: all 0.75s;
    }
    /* .edit,.dele{
    display: none;
}
.add:hover+.edit,.add:hover+.dele{
    display: block;
} */
    /* ========================底部部分======================== */
    
    .grad {
        width: 100%;
        min-width: 1200px;
        height: 5px;
        margin: auto;
        margin-bottom: 30px;
        margin-top: 140px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }
    
    .g_left {
        flex: 42%;
        width: 43%;
        height: 100%;
        background-color: #4d90c4;
        /* 不支持线性的时候显示 */
        background-image: linear-gradient(to left, #007acc, #f3f7fa);
    }
    
    .g_right {
        flex: 42%;
        width: 43%;
        height: 100%;
        background-color: #4d90c4;
        /* 不支持线性的时候显示 */
        background-image: linear-gradient(to right, #007acc, #f3f7fa);
    }
    
    .grad>span {
        flex: 4%;
        font: bold 20px STXingKai;
        text-align: center;
    }
    
    .sendemail {
        display: block;
        width: 100%;
        height: 100%;
        color: #0467a8;
        text-decoration: none;
    }
    /* ========================模式切换======================== */
    
    .mode {
        position: absolute;
        width: 60px;
        height: 20px;
        line-height: 20px;
        top: 2px;
        right: 2px;
        font-size: 14px;
        background: #4689bf;
        border-radius: 10px;
        overflow: hidden;
    }
    
    #day,
    #night {
        width: 40px;
        height: 100%;
        color: #0467a8;
        border-radius: 10px;
        text-align: center;
        cursor: pointer;
    }
    
    #day {
        background: #fff;
    }
    
    #night {
        display: none;
        float: right;
        background: #000;
    }
    /*========================提示框==========================*/
    
    #tip {
        position: absolute;
        top: 382px;
        width: 100%;
        height: 30px;
        line-height: 30px;
        z-index: 2;
    }
    
    #tip span {
        display: block;
        width: 166px;
        height: 100%;
        margin: auto;
        color: orangered;
        text-align: center;
        padding: 0 10px;
        border: 1px solid orangered;
        box-shadow: 1px 1px 2px orangered;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    /*=======================弹出模态框=========================*/
    
    .position_input {
        /* display: none; */
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        background: rgba(0, 0, 0, 0.25);
    }
    
    .AED {
        width: 340px;
        height: auto;
        margin: auto;
        margin-top: 400px;
    }
    
    .set_tag {
        width: 335px;
        height: auto;
        margin: auto;
        padding-bottom: 30px;
        border: 1px solid #4689bf;
        background: #fff;
        box-shadow: 1px 1px 3px #6998be;
    }
    #set_content>h5{
        color: rgb(250, 19, 19);
        text-align: center;
        margin-top: 28px;
    }
    .set_tag>span {
        display: block;
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #fff;
        font-size: 18px;
        background: #4689BF;
        text-align: center;
    }
    
    .add_tag,
    .add_url,
    .add_sym {
        width: 282px;
        height: 38px;
        margin: 10px auto;
        border: 1px solid #4689BF;
    }
    
    .add_tag {
        margin-top: 32px;
    }
    
    .set_tag input {
        color: #4689bf;
        width: 282px;
        height: 100%;
        outline: none;
        border: none;
        font-size: 16px;
        padding-left: 10px;
        box-sizing: border-box;
    }
    
    .add_sym {
        border: none;
        height: 30px;
        margin: 0 auto;
        color: #7EADD2;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .add_sym>span {
        font-size: 15px;
        cursor: pointer;
        /* border: 1px solid #4689BF; */
    }
    
    .btn {
        width: 100%;
        height: 40px;
        margin-top: 38px;
        display: flex;
        justify-content: space-evenly;
    }
    
    #sure {
        width: 282px;
        height: 35px;
        color: #fff;
        background: #4689bf;
        text-align: center;
        line-height: 33px;
        border: 1px solid #4689BF;
        border-radius: 8px;
        cursor: pointer;
    }
    
    #sure:hover {
        opacity: 0.75;
    }
</style>
<script>
    var _search = ''
    var _right1 = ''
    var _right2 = ''
    var _add = ''
    var _dele = ''
    var _edit = ''
    var icon = ''

    /*数据*/
    var code = `https://gitee.com/tilin/nav/edit/master/index.html`
    var mainTitle = ['天道酬勤']
    var data = [{
            "Study": [{
                "tag": "学 习 轨 迹"
            }, {
                "tips": [{
                    "title": "个人",
                    "web": ["GitHub", "Gitee", "blog", "有道笔记", "QQ邮箱"],
                    "url": ["https://github.com/", "https://gitee.com/", "http://tilin.gitee.io", "https://note.youdao.com/web/#/file/recent", "https://mail.qq.com/"]
                }, {
                    "title": "常规",
                    "web": ["百度云", "蓝奏云", "blog"],
                    "url": ["https://pan.baidu.com/", "https://www.lanzou.com/u", "blog"]
                }]
            }]
        }, {
            "Resource": [{
                "tag": "资 源 装 填"
            }, {
                "tips": [{
                    "title": "社区",
                    "web": ["SegmentFault", "CSDN", "V2EX", "掘金", "StackOverFlow"],
                    "url": ["https://www.segmentfault.com", "https://www.csdn.net", "https://www.v2ex.com", "https://juejin.im/", "https://stackoverflow.com/"]
                }, {
                    "title": "个人学习网站",
                    "web": ["张鑫旭", "阮一峰", "廖雪峰", "孟坤"],
                    "url": ["https://www.zhangxinxu.com/", "http://www.ruanyifeng.com/", "https://www.liaoxuefeng.com/", "https://mkblog.cn/"]
                }, {
                    "title": "API",
                    "web": ["Vue", "菜鸟教程", "ElementUI", "Echarts","Chrome插件1", "Chrome插件2"],
                    "url": ["https://cn.vuejs.org/v2/guide/", "https://www.runoob.com/", "https://element.eleme.cn/#/zh-CN/component/installation","https://www.echartsjs.com/examples/zh/index.html", "https://blog.csdn.net/github_35631540/article/details/89842146", "http://open.chrome.360.cn/extension_dev/contextMenus.html"]
                }, {
                    "title": "插件 工具",
                    "web": ["Font Awesome", "IconFont", "图片转base64", "去除HTML标签", "Chrome插件", "极简插件"],
                    "url": ["http://www.fontawesome.com.cn/faicons/", "https://www.iconfont.cn/", "http://imgbase64.duoshitong.com/", "http://www.jiniannet.com/Page/clearhtml", "http://www.cnplugins.com/", "https://chrome.zzzmh.cn/"]
                }]
            }]
        }, {
            "Interest": [{
                "tag": "收 集 延 伸"
            }, {
                "tips": [{
                    "title": "强悍网站",
                    "web": ["聚BT", "吾爱破解", "虫部落", "在线工具", "addog","百度网盘资源"],
                    "url": ["https://jubt.net", "https://www.52pojie.cn/", "https://www.chongbuluo.com/", "https://tool.lu/", "http://www.addog.vip/","http://www.friok.com/"]
                }, {
                    "title": "图片",
                    "web": ["爱给", "觅元素", "花瓣网", "素材中国", "素材天下", "图虫", "在线抠图", "稿定设计", "搜图导航", "百图汇", "天堂图片", "PS教程自学网"],
                    "url": ["http://www.aigei.com/", "http://www.51yuansu.com/", "https://huaban.com/", "http://www.sccnn.com/", "http://www.sucaitianxia.com/", "https://tuchong.com/", "https://www.remove.bg/zh", "https://www.gaoding.com/", "https://www.91sotu.com/", "http://pic.5tu.cn/", "https://www.ivsky.com/", "http://www.16xx8.com/"]
                }, {
                    "title": "视频",
                    "web": ["VIP云点播", "西瓜影院", "比特大雄", "XyPlayer", "优乐电影", "视频下载", "美剧天堂"],
                    "url": ["https://www.vipydb.com/", "https://www.xigua66.com/", "https://www.btdx8.com/", "https://parse.xymov.net/", "http://www.youlebe.com/", "https://www.videofk.com/", "https://www.meijutt.tv/"]
                }, {
                    "title": "其它",
                    "web": ["音乐狂", "bilibili", "大力盘", "有道翻译", "公众号编辑", "知音漫客[斗破]", "字體家", "今日热榜", "全历史", "中国色[配色]", "站长素材", "指导手册[全球]", "草料二维码", "临时邮箱", "文叔叔[传文件]"],
                    "url": ["http://music.junyuewl.com/", "http://www.bilibili.com/", "https://www.dalipan.com/", "http://www.youdao.com/", "http://www.zhubian.com/", "https://www.zymk.cn/1/", "https://www.zitijia.com/", "https://tophub.today/", "https://www.allhistory.com/", "http://zhongguose.com/", "http://sc.chinaz.com/", "https://zh.wikihow.com/", "https://cli.im/", "http://24mail.chacuo.net/", "https://www.wenshushu.cn/"]
                }]
            }]
        }, {
            "More": [{
                "tag": "更 多 搜 索"
            }, {
                "tips": [{
                    "title": "常用",
                    "web": ["有道翻译", "GitHub", "电影搜索[优乐]", "菜鸟教程", "SegmentFault", "图片[图虫]", "热搜[今日热榜]", "五号站[电影]", "爱给[素材]", "网易云音乐", "视频下载[链接]", "B站"],
                    "url": ["http://www.youdao.com/w/eng/", "https://github.com/search?q=", "http://jx.youlebe.com/?url=", "https://www.runoob.com/?s=", "https://segmentfault.com/search?q=", "http://stock.tuchong.com/search?source=tc_pc_home_search&term=", "https://tophub.today/search?q=", "http://www.baike567.com/s/PARAMS=/", "http://www.aigei.com/s?q=", "https://music.163.com/#/search/m/?s=", "https://www.videofk.com/index-video-download/search?url=", "https://search.bilibili.com/all?keyword="]
                }, {
                    "title": "素材·资料",
                    "web": ["站长素材", "IconFont", "人人影视", "大力盘","百度网盘资源", "Chrome插件"],
                    "url": ["http://aspx.sc.chinaz.com/query.aspx?keyword=", "https://www.iconfont.cn/search/index?searchType=icon&q=", "http://www.yyetss.com/Search/index/?s_keys=", "https://www.dalipan.com/search?keyword=","http://www.friok.com/?s=", "http://www.cnplugins.com/advsearch.php?q="]
                }, {
                    "title": "搜索[导航]",
                    "web": ["虫部落·快搜", "云主页", "小森林搜索"],
                    "url": ["https://search.chongbuluo.com/", "https://zhuye.cloud/", "http://www.xsldh6.com/search"]
                }]
            }]
        }]
        // ========================时钟部分======================== 
    var oul = document.querySelectorAll(".t_ul");
    var back = document.querySelectorAll(".back");
    var front = document.querySelectorAll(".front");
    var Top = document.querySelectorAll(".top");
    var bot = document.querySelectorAll(".bot");
    var arr = [];
    arr[0] = Math.floor(new Date().getHours() / 10);
    arr[1] = new Date().getHours() % 10;
    arr[2] = Math.floor(new Date().getMinutes() / 10);
    arr[3] = new Date().getMinutes() % 10;
    arr[4] = Math.floor(new Date().getSeconds() / 10);
    arr[5] = new Date().getSeconds() % 10;
    for (var i = 0; i < arr.length; i++) {
        front[i].innerHTML = arr[i];
        back[i].innerHTML = arr[i] + 2 >= 10 ? (arr[i] + 2) % 10 : arr[i] + 2;
        Top[i].innerHTML = arr[i] + 3 >= 10 ? (arr[i] + 3) % 10 : arr[i] + 3;
        bot[i].innerHTML = arr[i] + 1 >= 10 ? (arr[i] + 1) % 10 : arr[i] + 1;
    }

    addStyle(oul)

    function addStyle(el) { // 元素，分割样式 oul,3,[2,2,2]
        for (let j = 0; j < el.length; j++) {
            j % 2 == 0 ? el[j].setAttribute('style', 'margin-right:5px') : el[j].setAttribute('style', 'margin-left:5px')
        }
    }

    function time() {
        var arr2 = [];
        arr2[0] = Math.floor(new Date().getHours() / 10);
        arr2[1] = new Date().getHours() % 10;
        arr2[2] = Math.floor(new Date().getMinutes() / 10);
        arr2[3] = new Date().getMinutes() % 10;
        arr2[4] = Math.floor(new Date().getSeconds() / 10);
        arr2[5] = new Date().getSeconds() % 10;

        for (var i = 0; i < oul.length; i++) {
            if (front[i].innerHTML != arr2[i]) {
                oul[i].classList.add("transition");
            }
            oul[i].index = i;
            oul[i].addEventListener("webkitTransitionEnd", function() {

                front[this.index].innerHTML = arr2[this.index];
                back[this.index].innerHTML = arr2[this.index] + 2 < 10 ? arr2[this.index] + 2 : (arr2[this.index] + 2) % 10;
                Top[this.index].innerHTML = arr2[this.index] + 3 < 10 ? arr2[this.index] + 3 : (arr2[this.index] + 3) % 10;
                bot[this.index].innerHTML = arr2[this.index] + 1 < 10 ? arr2[this.index] + 1 : (arr2[this.index] + 1) % 10;

                this.classList.remove("transition");

            })

        }

    }
    setInterval(time, 350)

    // 设置标题
    var Title = document.getElementById('head')

    if (getData('mainTitle')) {
        Title.innerText = getData('mainTitle')
    } else {
        Title.innerText = mainTitle[0]
    }
    Title.ondblclick = function() {
            addEditDele('mainTitle')
        }
        // ========================导航部分======================== 
        /* 显示与隐藏 */
    var tag = document.querySelectorAll(".tag");
    var list = document.getElementsByClassName('list');
    var fa = document.querySelectorAll(".nav>div>.fa-angle-double-right");

    for (let i = 0; i < tag.length; i++) {
        tag[i].index = i

        tag[i].addEventListener('mouseover', function(e) {

        })
    }
    var Nav = document.querySelectorAll('.nav>div')
    var more = document.getElementById('more')
    for (let i = 0; i < data.length; i++) {
        if (i == data.length - 1) {
            more.innerHTML = nav(data, i)
            document.querySelectorAll('#more .tag .title')[0].style.display = 'none'
        } else {
            Nav[i].innerHTML = nav(data, i)
        }
    }
    /*填充DOM函数*/
    function nav(data, i) {
        for (let k = 0; k < data.length; k++) {
            let Tag = data[i].Study || data[i].Resource || data[i].Interest || data[i].More
            var Html1 =
                `<div class="tag">
                        <div class="title">
                            ${Tag[0].tag} <i style="width: 28px;height: 38px;margin: -6px 0;"></i>
                        </div>
                        <div class="list">
                            
                `
            var [Html2, Html3] = ['', '']
            for (let r = 0; r < Tag[1].tips.length; r++) {
                Html2 += `<ul><span>${Tag[1].tips[r].title} <i style="width: 25px;height: 12px;display: inline-block;"></i><span class="add" title="添加新标签"></span><span class="edit" title="编辑标签"></span><span class="dele" title="删除标签"></span></span>`

                for (let j = 0; j < Tag[1].tips[r].url.length; j++) {
                    Html3 += `<li><a href="${Tag[1].tips[r].url[j]}" target="_blank">${Tag[1].tips[r].web[j]}</a></li>`
                }
                Html2 += Html3 + '</ul>'
                Html3 = ''
            }


            var Html4 = `</ul>`
            var Html = Html1 + Html2 + Html3
            return Html // 注意：reutrn 后for的值又重新开始，若在for外边return，则for每次都会执行完，此处只需执行一次即可，因此使用外部传进来的变量i
        }
    }
    /*加箭头*/
    var iconRight1 = document.querySelectorAll('.tag>.title>i')
    var iconRight2 = document.querySelectorAll('.tag>.list i')
    var add = document.querySelectorAll('.add')
    var edit = document.querySelectorAll('.edit')
    var dele = document.querySelectorAll('.dele')
    iconRight(iconRight1, _right1)
    iconRight(iconRight2, _right2)
    iconRight(add, _add)
    iconRight(edit, _edit)
    iconRight(dele, _dele)

    function iconRight(el, arg) {
        for (let j = 0; j < el.length; j++) {
            el[j].style.background = `url(${arg}) center no-repeat`
        }
    }

    /*动态数据处理*/
    var list_ul = document.querySelectorAll('.list>ul')
    var pstion = document.getElementsByClassName('position_input')[0]
    var aed = document.getElementsByClassName('AED')[0]
    var set_ipt = document.querySelectorAll('.set_tag input')
    var cancel = document.getElementById('cancel')

    var add_sym = document.querySelectorAll('.add_sym>span')[0]
    var [flag, CUD_E] = []

    for (let i = 0; i < add.length; i++) {
        /*添加*/
        add[i].index = i
        action(add[i], 'add')
            /*编辑*/
        action(edit[i], 'edit')
            /*删除*/
        action(dele[i], 'dele')
    }
    aed.onclick = function(e) { // 阻止弹出编辑框事件向下
        e.stopPropagation()
    }
    var setContent = document.getElementById('set_content')
        /*添加、编辑、删除*/
    function action(el, arg) {
        el.addEventListener('click', function(e) {
            addEditDele(arg)
            block(pstion)
            // 传递该节点，用于CUD
            CUD_E=e
        })
    }
    /*添加标签模板*/
    function addEditDele(flag) {
        let the_title = ['删除标签', "编辑标签", "新增标签", "编辑标题"]
        let the_sym = ['删除', "编辑", "新增"]
        switch (flag) { // 注意添加break停止往下执行
            case 'add':
                flag = the_title[2];
                break;
            case 'edit':
                flag = the_title[1];
                break;
            case 'dele':
                flag = the_title[0];
                break;
            case 'mainTitle':
                flag = the_title[3];
                break;
            default:
                tips('发生错误！')
        }
        document.getElementById('set_title').innerText = flag // 标签标题
        let set_tips = `<h5>抱歉，当前不支持本地操作，请跳转到仓库进行修改！</h5>`
        let set_name = `<div class="add_tag">
                    <input autofocus placeholder="名称">
                </div>`
        let set_url = `<div class="add_url">
                    <input placeholder="地址">
                </div>`
        let set_tag_add = `<div class="add_sym">
                    <span title="点击生成新文本框">------------------ 新增 ------------------</span>
                </div>`
        let set_tag_dele = `<div class="add_sym dele_sym">
                    <span title="点击删除文本框">------------------ 删除 ------------------</span>
                </div>`
        if (flag == the_title[3]) { // 弹出设置标题
            setContent.innerHTML = set_name
            
        }else{
            setContent.innerHTML = set_tips
            document.querySelectorAll('.AED .btn')[0].innerHTML=`<a href="${code}" target="_blank" id="sure">立即跳转</a>`
            
        }
        /* 
        else
        if (flag == the_title[2]) { // 添加
            setContent.innerHTML = set_name + set_url + set_tag_add
        } else
        if (flag == the_title[1]) { // 编辑
            setContent.innerHTML = set_name + set_url + set_tag_add
        } else
        if (flag == the_title[0]) { // 删除
            setContent.innerHTML = set_name + set_url + set_tag_dele
        } else {
            tips('错误弹出！')
        }
        */
        block(pstion)
    }

    pstion.onclick = function(e) { //模态框关闭
        none(this)
    }

    /*编辑确定*/
    var sure = document.getElementById('sure')
    sure.onclick = function() {
                //执行存储
                // toSave(setIptData())
            let getIptData=setIptData()
            if(getIptData==false){
                tips('输入内容不能为空！')
            }
            else{
                toSave(getIptData)
            }
        }
        /*获取input数据*/
    function setIptData() {
        let getContIpt = document.querySelectorAll('#set_content input')
        let [setName, setUrl, total] = [[],[],[]]
        for (let g = 0; g < getContIpt.length; g++) {
            if (getContIpt[g].value.trim().length == 0) {
                return false
            }
            if (g % 2==0) { //存放名称
                setName.push(getContIpt[g].value.trim())
            } else {    // 存放地址
                setUrl.push(getContIpt[g].value.trim())
            }
        }
        total.push(setName, setUrl)
        return total
    }
    /*处理、保存*/
    function toSave(data) {
        //标题
        if (data.length && data[0].length) {
            Title.innerText = data[0]
            setData('mainTitle', data[0])
        } else { //CUD
            if (data.length) { // create
                
                // CUD_E.target.parentNode.parentNode.appendChild(aLink)
            }
        }
        none(pstion)
    }


    // ========================搜索部分======================== 
    var search = document.getElementById('search')
    var ipt = document.getElementById('ipt_val')
    var collect = document.getElementById('collect')
    var iconSearch = document.querySelectorAll('.search_box>i')[0]
    var clear = document.getElementById('clear')
        /*清除数据*/
    clear.onclick = function() {
        ipt.value = ''
        this.style.display = 'none'
    }
    iconSearch.style.background = `url(${_search}) center no-repeat`

    search.onclick = function(i) {
            openUrl("https://www.baidu.com/s?wd=")
        }
        /*回车搜索*/
    ipt.addEventListener('keyup', function(e) {
            var theEvent = window.event || e;
            var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
            if (ipt.value.trim().length) {
                clear.style.display = 'block'
            }
            if (code == 13) {
                openUrl("https://www.baidu.com/s?wd=")
            }
        })
        /*更多搜索*/
    var moreSearch = document.getElementById('moreSearch')
    var Mlink = document.querySelectorAll('#more .list a')

    moreSearch.onclick = function(e) {
            document.querySelectorAll('#more .tag .list')[0].style = 'opacity:1'
            more.style.display == 'block' ? more.style.display = 'none' : more.style.display = 'block'
            e.stopPropagation()
        }
        /*Ctrl触发打开输入链接*/
    document.onkeydown = function(e) {
        let l = ipt.value.trim()
        let keyCode = e.which ? e.which : e.keyCode
        if (e.ctrlKey || keyCode == 17) {
            openUrl('', 'ctrl')
        }

    }
    var moreData = data[data.length - 1].More[1].tips
    var MORE = []
        /*获取data里面的url*/
    for (let d = 0; d < moreData.length; d++) {
        let l = moreData[d].url
        for (let u = 0; u < l.length; u++) {
            MORE.push(l[u])
        }
    }
    /*添加链接*/
    var moreL = moreData[moreData.length - 1].url.length // 排除“搜索”部分不去除href
    for (let m = 0; m < (Mlink.length - moreL); m++) {
        Mlink[m].removeAttribute('href')
        Mlink[m].addEventListener('click', function() {
            let endParams = MORE[m].split('PARAMS=')[1]
            if (endParams) {
                openUrl(MORE[m], 'PARAMS=/')
            } else {
                openUrl(MORE[m])
            }
        })
    }

    /*搜索、是否为空*/
    function openUrl(url, i) {
        let openFlag = false // 打开链接条件
        let l = ipt.value.trim()
        if (l.length == 0) {
            tips('输入内容不能为空！')
            return false
        }
        if (i == 'ctrl') {
            // 清空url，进行判断链接前后缀
            if (l.substring(0, 4) == 'http') {

            } else {
                l = l.substring(l.length - 4) == '.com' ? (l.substring(0, 4) == 'www.' ? `https://${l}` : `https://www.${l}`) : ((l.substring(0, 4) == 'www.' ? `https://${l}` : `https://www.${l}`) + `.com`)
            }
            url = url + l
            openFlag = true
        }
        // 中间部分参数处理
        if (i == 'PARAMS=/') {
            url = Reg(url, i, l + '/') // 正则进行规范
            openFlag = true
        }
        if (openFlag) {
            window.open(url)
        } else {
            window.open(url + l)
        }
        openFlag = false
    }
    /*正则替换*/
    function Reg(str, arg1, arg2) { //替换的字符串 谁替换 替换成什么
        return str.replace(new RegExp(arg1, 'gi'), arg2)
    }
    /* 弹出框*/
    var tip = document.getElementById('tip')
    var tipTxt = document.getElementById('tiptxt')
    let t = null

    function tips(txt) {
        tipTxt.innerText = txt
        block(tip)
        clearTimeout(t)
        t = setTimeout(function() {
            none(tip)
            return false
        }, 1850)

    }
    //==========================模式切换=========================
    var day = document.getElementById('day')
    var night = document.getElementById('night')
    var body = document.getElementsByTagName('body')[0]
    var Alink = document.querySelectorAll('.list>ul>li>a')
        // 底部页脚
    var gLeft = document.getElementsByClassName('g_left')[0]
    var gRight = document.getElementsByClassName('g_right')[0]
    var getMode = getData('mode') //获取存储数据
    if (getMode) {
        getMode == 'day' ? Day(night) : Night(day)
    } else {
        setData('mode', 'day')
    }
    day.onclick = function() { //转为夜间模式
        setData('mode', 'night')
        Night(this)
    }
    night.onclick = function() { //转为白天模式
            setData('mode', 'day')
            Day(this)
        }
        /*白天与黑夜*/
    function Day(_this) {
        none(_this)
        removClass(body)
        removClass(more)
        removeStyle(gLeft)
        removeStyle(gRight)
        block(day)
    }

    function Night(_this) {
        none(_this)
        addClass(body, 'body')
        addClass(more, 'more')
        addStyle(gLeft, 'background:linear-gradient(to left, #007acc ,#000 )')
        addStyle(gRight, 'background:linear-gradient(to right, #007acc ,#000 )')
        for (let a = 0; a < Alink.length; a++) {
            addStyle(Alink[a], 'color:#4d90c4')
        }
        block(night)
    }

    /*显示与隐藏函数*/
    function block(el) {
        el.style.display = 'block'
    }

    function none(el) {
        el.style.display = 'none'
    }
    /*元素添加或除去样式*/
    function addStyle(el, as) {
        el.style = as
    }

    function removeStyle(el) {
        el.removeAttribute('style')
    }
    /*添加或删除class属性*/
    function addClass(el, css) {
        el.setAttribute('class', css)
    }

    function removClass(el) {
        el.removeAttribute('class')
    }
    /*模拟操作jQuery淡入、淡出*/
    function fadein(ele, opacity, speed) {
        if (ele) {
            var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity;
            v < 1 && (v = v * 100);
            var count = speed / 1000;
            var avg = count < 2 ? (opacity / count) : (opacity / count - 1);
            var timer = null;
            timer = setInterval(function() {
                if (v < opacity) {
                    v += avg;
                    setOpacity(ele, v);
                } else {
                    clearInterval(timer);
                }
            }, 500);
        }
    }

    function fadeout(ele, opacity, speed) {
        if (ele) {
            var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity || 100;
            v < 1 && (v = v * 100);
            var count = speed / 1000;
            var avg = (100 - opacity) / count;
            var timer = null;
            timer = setInterval(function() {
                if (v - avg > opacity) {
                    v -= avg;
                    setOpacity(ele, v);
                } else {
                    clearInterval(timer);
                }
            }, 500);
        }
    }


    function setOpacity(ele, opacity) {
        if (ele.style.opacity != undefined) {
            ///兼容FF和GG和新版本IE
            ele.style.opacity = Math.round(opacity / 100);

        } else {
            ///兼容老版本ie
            ele.style.filter = "alpha(opacity=" + opacity + ")";
        }
    }
    changeFavicon(icon); // 动态修改网站图标
    function changeFavicon(link) {
        let $favicon = document.querySelector('link[rel="icon"]');

        if ($favicon !== null) {
            $favicon.href = link;
        } else {
            $favicon = document.createElement("link");
            $favicon.rel = "icon";
            $favicon.href = link;
            $favicon.type = "image/x-png"
            document.head.appendChild($favicon);
        }
    };
    /*localStorage*/
    if (window.localStorage) {

    } else {
        tips('浏览器不支持本地存储')
    }

   
    //getItem
    function getData(key) {
        return window.localStorage.getItem(key)
    }
    //setItem
    function setData(key, data) {
        window.localStorage.setItem(key, data)
    }
    // removeItem(just one)
    function removeData(key) {
        localStorage.removeItem(key)
    }
</script>

</html>